<template>
  <div>
    <headNav :title="title" ></headNav>
    <!-- 绑定卡号 -->
    <div class="flexHeight headNameCss" v-if="title == '绑定卡号' || title == '编辑卡号'" >
      <div class="flexAlign" >
        <span>卡号：</span>
        <input type="text" v-model="cardNum" placeholder="请输入消费卡号" />
      </div>
      <button type="default" @click="bindingCardClick" >确定</button>
    </div>

    <!-- 充值 -->
    <div class="bottomCss" v-if="title == '卡号充值'" >
      <div class="flexHeight rechargeCss" :class="{borderCss: val.id == num}"
      v-for="(val, index) in goldList" :key="index" @click="num = val.id" >
        <img src="@/assets/img/my/orange.png" alt="" v-if="num == val.id" >
        <span class="spanCss" >充值</span>
        <span>{{val.num}}元</span>
      </div>

      <div class="flexHeight headNameCss">
        <div class="flexAlign" >
          <span>自定义金额：</span>
          <input type="text" value="" placeholder="请输入消费卡号" style="width: 4rem;" />
        </div>
        <button type="default" >充值</button>
      </div>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getBindingApi, getUnbundlingApi, postDetectBindingApi } from '@/api/myNewApi'
export default {
  components: {
    headNav,
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      schoolId: state => state.user.schoolId,
      loginUserId: state => state.user.loginUserId
    })
  },
  data () {
    return {
      cardNum: '',   // 用户填写的卡号
      num: 1,
      title: '绑定卡号',
      goldList: [
        {id: 1, num:10}, {id: 2, num:50}, {id: 3, num:100},
        {id: 4, num:200}, {id: 5, num:500}, {id: 6, num:1000}
      ]
    }
  },
  methods: {
    // 绑定卡号点击事件
    async bindingCardClick () {
      if (!this.cardNum) {
        this.$vux.toast.text('卡号不能为空', 'middle')
        return
      }

      var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
    　if (pattern.test(this.cardNum)){
         this.$vux.toast.text('严禁输入特殊字符', 'middle')
    　　　return
    　}

      if (/.*[\u4e00-\u9fa5]+.*$/.test(this.cardNum)) {
        this.$vux.toast.text('卡号只能为数字以及英文', 'middle')
        return
      }

      if (this.cardNum.length > 20) {
        this.$vux.toast.text('卡号最多限制20位数', 'middle')
        return
      }
      this.$vux.confirm.show({
        title: '提示',
        content: '是否确定执行该操作？',
        onConfirm : async () => {
          this.packBinding()
        },
        onCancel () {
        }
      })
      
    },
    // 绑定消费卡方法封装
    async packBinding () {
      let value = JSON.parse(localStorage.bindingRequired)



      if (this.title == '编辑卡号') {
        let detectBinding = {
          schoolId: this.schoolId,
          studentId: value.studentId,
          consumerCardNo: value.cardNo
        }

        let testing = await postDetectBindingApi(detectBinding)
        if (testing) {
          let paramss = {
            id: 1111,
            SchoolId: this.schoolId,
            StudentId: value.studentId,
            OperatorId: this.loginUserId,
            ConsumerCardNo: value.cardNo,
            UnSetPhoneBindState: true
          }
          await getUnbundlingApi(paramss)
        } else {
          this.$vux.toast.text('此卡无法修改绑定', 'middle')
          return
        }
      }

      let params = {
        schoolId: this.schoolId,
        studentId: value.studentId,
        consumerCardNo: this.cardNum,
        operatorId: this.loginUserId,
        ingoreDeviceState: true
      }
      let res = await getBindingApi(params)
      console.log(res)
      this.$vux.toast.text('操作成功', 'middle')
      this.$router.push('oneCard')
    }
  },
  mounted() {
    this.title = localStorage.operation
    let value = JSON.parse(localStorage.bindingRequired)
    if (this.title == '编辑卡号') {
      let value = JSON.parse(localStorage.bindingRequired)
      this.cardNum = value.cardNo
    }
  }
}
</script>

<style lang="less" scoped >
 .borderCss{
   border: 1px solid #FF9900!important;
   color: #FF9900!important;
   background: #fffaf1!important;
 }

.rechargeCss {
  width: 2rem;
  height: 1.26rem;
  color: #128FEF;
  font-size: 0.36rem;
  border: 1px solid #289BF3;
  border-radius: 0.1rem;
  margin: 0 0.2rem 0.3rem 0;
  justify-content: center;
  align-items: center;
  position: relative;
  .spanCss {
    color: #666666;
    font-size: 0.28rem;
  }
  img {
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 0.5rem;
  }
}

.bottomCss {
  width: 6.8rem;
  height: 3rem;
  margin: 0.5rem 0 0 0.3rem;
  display: flex;
  flex-wrap: wrap;
}

.headNameCss {
  .flexHeight;
  justify-content: center;
  align-items: center;
  div {
    width: 6.2rem;
    height: 1.2rem;
    margin-left: 0.2rem;
    border-bottom: 1px solid #bdbdbd;
    font-size: 0.3rem;
  }
}

button {
  width: 5rem;
  height: 0.7rem;
  color: #FFF;
  background: #128fef;
  border-radius: 0.3rem;
  border: 0;
  font-size: 0.3rem;
  margin-top: 0.5rem;
}

input {
  width: 4.5rem;
  height: 0.6rem;
  margin-left: 0.2rem;
  padding-left: 0.2rem;
  border-radius: 0.2rem;
  font-size: 0.3rem;
  background: #f4f4f4;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
